import React from "react";
import {NewsListItem, TextContainer, UnderContainer} from "./style";
import _ from 'lodash';
import {EyeFilled, HeartOutlined, ShareAltOutlined} from "@ant-design/icons";
import Config from "@/config";
import {Avatar} from "antd";

const NewsItem = (props) => {
    let isClick = false;
    let startPlace = {
        x: null,
        y: null,
    }

    function pushToPageDetail() {
        if (!_.isEmpty(props.data.id)) {
            window._ROUTER_.push({pathname: `/p?pid=${props.data.id}&isRecommend=true`, query: {pid: props.data.id, isRecommend: true}});
        }

    }

    return (
        <NewsListItem
            image={props.data.photoUrl}
            onMouseDown={(e) => {
                startPlace.x = e.screenX;
                startPlace.y = e.screenY;
            }}
            onMouseUp={(e) => {
                isClick = Math.sqrt((e.screenX - startPlace.x) * (e.screenX - startPlace.x) + (e.screenY - startPlace.y) * (e.screenY - startPlace.y)) <= 3
            }}
            onClick={() => {
                isClick ? pushToPageDetail() : null
            }}
        >
            <TextContainer>
                <a onClick={() => {
                    isClick ? pushToPageDetail() : null
                }}>
                    <span className='title'>{props.data.pageTitle}
                        {
                            props.data.watchCount > 40 ?
                                <>
                                    <Config.IconFont type={'icon-renqi'} style={{marginLeft: '10px'}}/>
                                </>
                                :
                                null
                        }

                    </span>
                </a>
                <UnderContainer>
                    {
                        props.data.categoryName ?
                            <span style={{marginRight: '20px'}}>{props.data.categoryName}</span> : null
                    }
                    <EyeFilled style={{marginRight: '5px'}}/>
                    <span>{props.data.watchCount}</span>
                    <HeartOutlined style={{marginRight: '5px'}}/>
                    <span>{props.data.likeCount}</span>
                    <ShareAltOutlined style={{marginRight: '5px'}}/>
                    <span>{props.data.shareCount}</span>
                    <Avatar src={props.data.authorImage} style={{float: 'right'}} size={13}/>
                    <span style={{float: 'right', marginRight: '5px'}}>{props.data.authorName}</span>
                </UnderContainer>
            </TextContainer>
        </NewsListItem>
    )
}

export default NewsItem;
